﻿
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>图片管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <script src="~/layui/layui.js"></script>
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/dist/echarts.js" type="text/javascript"></script>

    <script src="~/js/TimeFormat.js"></script>
</head>

<body>
    <div class="margin" id="page_style">
        @*<div class="operation clearfix mb15 same_module">
            <ul class="choice_search">
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <label class="label_name ">品牌名称：</label>
                    <input placeholder="输入品牌名称" id="brandname" type="text" class="form-control col-xs-8 col-lg-8 col-ms-8" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3">
                    <label class="label_name ">添加时间：</label>
                    <input class="inline laydate-icon form-control Select_Date" id="start" />
                </li>
                <li class="clearfix col-xs-2 col-lg-3 col-ms-3 ">
                    <button type="button" class="btn button_btn bg-deep-blue " onclick="TableReload()" ><i class="icon-search"></i>查询</button>
                </li>
            </ul>
        </div>*@

        <!--品牌列表-->
        <div class="list_Exhibition list_show padding15">
            <div class="operation clearfix mb15  same_module">
                <span class="l_f">
                    <a href="/FileUpload/Add_Pic" title="添加图片" class="btn button_btn bg-deep-blue"><i class="fa fa-plus"></i>添加图片</a>
                    <a href="javascript:ovid()"  id="deleteBrand"  onclick="Deletes()" data-type="getCheckData" class="btn  button_btn btn-danger"><i class="fa fa-trash"></i>批量删除</a>
                </span>
               @* <span class="r_f">共：<b>11</b>个品牌</span>*@
            </div>
            <table id="BrandTable" class="layui-hide" lay-filter="test"></table>
        </div>
    </div>
</body>
</html>
<script type="text/html" id="display">
    <input type="checkbox" name="switch" value="{{d.Id}}" lay-skin="switch" lay-text="有效|无效" lay-filter="Status" {{ d.Pic_Status == 1 ? 'checked' : '' }} />
</script>
<script type="text/html" id="barDemo">
    <a title="编辑"  href="javascript:;" lay-event="edit" class="btn btn-xs btn-info">编辑</a>
    <a title="删除" href="javascript:;"   lay-event="del" class="btn btn-xs btn-delete">删除</a>
</script>
<script>
layui.use('table', function () {
        var table = layui.table,
            form = layui.form;
        //第一个实例
        table.render({
            elem: "#BrandTable",
            height: 400,
            url: '/FileUpload/picQueryTable',
            page: true,
            cols: [[ //表头
              { type: 'checkbox', fixed: 'left', align: 'center' }
            , { field: 'Pic_Id', align: 'center', title: 'id', sort: true }
            , { field: 'ProductId', align: 'center', title: '商品名称', sort: true }
            , { field: 'Pic_Url',height:60, align: 'center', title: '商品图片', sort: true, templet: '<div onclick="show_img(this)" ><img  width="40" height="40" src="{{d.Pic_Url}}"></div>' }
            , { field: 'Pic_Order', align: 'center', title: '排序', sort: true }
            , { field: 'ModifiedTime', align: 'center', title: '修改时间', sort: true, templet: "<div>{{Format(d.ModifiedTime,'yyyy-MM-dd hh:mm:ss')}}</div>" }
            , { field: 'Is_Master', align: 'center', title: '是否主图', sort: true, templet: function (d) { if (d.Is_Master == 1) { return '主图' } else { return '非主图' } } }
            , { field: 'Pic_Status', align: 'center', title: '是否有效', sort: true ,toolbar:"#display" }
            , { field: 'cz',fixed: 'right' ,title: '操作', align: 'center', toolbar: '#barDemo', width: 150, sort: true }
             ]]
        })

         //监听工具条
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {//删除
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    type: "post",
                    url: "/FileUpload/picDeleteId?id=" + data.Pic_Id,
                    async: false,
                    success: function (data) {
                        if (data.Success) {
                            layer.msg("删除成功", { time: 2000 }, function () {
                                obj.del();
                               layer.close(index);
                            })
                        }
                    }
                })
            });
        } else if (obj.event === 'edit') {//修改
            location.href = "/FileUpload/Add_Pic?id=" + data.Pic_Id;
        }
    });

     //是否启用switch(Status)对应lay-filter="Status"
    form.on('switch(Status)', function (obj) {
        var data = {};
        data.Id = this.value;
        data.Status = 0;
        if (obj.elem.checked) {
            data.Status=1
        }
        $.ajax({
            type: "post",
            url: "/FileUpload/picUpdateStatus",
            data: data,
            success: function (data) {
                if (data.Success) {
                    //  location.reload();
                    layer.msg("修改成功!!", {
                        time: 2000 //1秒关闭（如果不配置，默认是3秒）
                    });
                } else {
                    layer.msg("修改失败", { icon: 5, time: 200 });
                }
            }
        })
    });

});

    //批量删除
    function Deletes() {
        var table = layui.table;
        //获取选中数据
        var checkStatus = table.checkStatus('BrandTable')
            , data = checkStatus.data;
        //获取拼接的id
        var id = BatchDelete(data);
        //删除数据
        layer.confirm('真的要删除吗', function (index) {
            $.ajax({
                url: "/FileUpload/DeleteBrand?brand=" + data,
                type: "Post",
                success: function (data) {
                    if (data.Success) {
                        layer.msg('删除成功！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        }, function () {
                            TableReload();
                            layer.close(index);
                        });
                    }
                    else {
                        layer.msg('删除失败！', {
                            title: '提示框',
                            icon: 1,
                            time: 2000
                        });
                    }
                }
            });
        })
    }

    //拼接id
    function BatchDelete(data) {
        var id = "";
        for (var i = 0; i < data.length; i++) {
            if (i != data.length - 1) {
                id += data[i].Id + ',';
            }
            else {
                id += data[i].Id;
            }
        }
        return id;
    }


   //列表刷新
    function TableReload() {
        var table = layui.table;
        var name = $('#brandname').val();
        var addTime = $('#start').val();
        table.reload('BrandTable', {
            where: {
                'name': name,
                'datetime': addTime
            }
        });
    }

</script>
<script>
    //设置内页框架布局
    $(function () {
        $("#Sellerber").frame({
            float: 'left',
            color_btn: '.skin_select',
            Sellerber_menu: '.list_content',
            page_content: '.list_show',//内容
            datalist: ".datatable_height",//数据列表高度取值
            header: 65,//顶部高度
            mwidth: 350,//宽度自定义
            minStatue: true,

        });
    });
    //设置时间
    laydate({
        elem: '#start',
        event: 'focus'
    });
</script>
